<?php
/**
 * Home Template 1 - 经典布局
 * 基于HTML文件夹中的index.html
 * 
 * @package WP Bootstrap Woo
 */

// 确保直接访问被阻止
defined('ABSPATH') || exit;

?>

<!-- newsletter-modal start -->
<div class="newsletter-modal modal fade" id="newslettermodal" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="news-close" data-bs-dismiss="modal"><i class="feather-x"></i></button>
                <div class="newsletter-info">
                    <div class="newsletter-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/home1/newsletter/popup.jpg" class="img-fluid" alt="popup">
                    </div>
                    <div class="newsletter-content">
                        <h2>15% off</h2>
                        <p>On your first purchase</p>
                        <div class="newsletter-form">
                            <form method="post" class="news-form">
                                <div class="news-wrap">
                                    <input type="email" name="q" placeholder="Enter your email" required>
                                    <button type="button" class="btn-style2">Subscribe</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- newsletter-modal end -->

<!-- main-content start -->
<main class="main-content" id="mainContent">
    <!-- home-slider start -->
    <section class="home-slider">
        <div class="home-banner">
            <div class="home-slider-area owl-carousel owl-theme">
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-1">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-6 col-lg-6 offset-md-6 offset-lg-6">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Smart devices</h1>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style1">Shop now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-2">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-6 col-lg-6">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Smart laptops</h1>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style2">Shop now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-3">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-6 col-lg-6 offset-md-6 offset-lg-6">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Smart appliances</h1>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style1">Shop now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- home-slider end -->

    <!-- service start -->
    <section class="service">
        <div class="container">
            <div class="service-area">
                <ul class="service-main">
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-truck"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Free shipping</h5>
                            <p>Free shipping over $100</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-credit-card"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Secure payment</h5>
                            <p>We ensure secure payment!</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-headphones"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Support 24/7</h5>
                            <p>Contact us 24 hours a day</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-refresh-cw"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>30 days return</h5>
                            <p>Simply return it within 30 days</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- service end -->

    <!-- featured product start -->
    <section class="featured-product">
        <div class="container">
            <div class="featured-pro-area">
                <div class="section-title">
                    <h3>Featured products</h3>
                </div>
                <div class="featured-pro-content">
                    <div class="row">
                        <?php
                        // 获取推荐产品
                        $featured_products = wc_get_featured_product_ids();
                        if (!empty($featured_products)) {
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => 8,
                                'post__in' => $featured_products,
                                'meta_query' => array(
                                    array(
                                        'key' => '_visibility',
                                        'value' => array('catalog', 'visible'),
                                        'compare' => 'IN'
                                    )
                                )
                            );
                        } else {
                            // 如果没有推荐产品，显示最新产品
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => 8,
                                'meta_query' => array(
                                    array(
                                        'key' => '_visibility',
                                        'value' => array('catalog', 'visible'),
                                        'compare' => 'IN'
                                    )
                                )
                            );
                        }
                        
                        $products = new WP_Query($args);
                        
                        if ($products->have_posts()) :
                            while ($products->have_posts()) : $products->the_post();
                                global $product;
                                ?>
                                <div class="col-12 col-lg-3 col-md-6">
                                    <div class="pro-item pro-item-main">
                                        <div class="product-link">
                                            <div class="product-img">
                                                <a href="<?php the_permalink(); ?>" class="product-image">
                                                    <?php echo woocommerce_get_product_thumbnail(); ?>
                                                </a>
                                                <div class="product-action">
                                                    <div class="pro-action">
                                                        <a href="<?php the_permalink(); ?>" class="product-info">
                                                            <span class="tooltip">产品详情</span>
                                                            <i class="feather-eye"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-cart product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">加入购物车</span>
                                                            <i class="feather-shopping-cart"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-wishlist product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">加入收藏</span>
                                                            <i class="feather-heart"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-info">
                                                <h6 class="product-name">
                                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                                </h6>
                                                <div class="product-price">
                                                    <span class="new-price"><?php echo $product->get_price_html(); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- featured product end -->

    <!-- categories start -->
    <section class="categories">
        <div class="container-fluid">
            <div class="categories-area">
                <div class="section-title">
                    <h3>Shop by categories</h3>
                </div>
                <div class="categories-content">
                    <div class="categories-main owl-carousel owl-theme">
                        <?php
                        $product_categories = get_terms('product_cat', array(
                            'hide_empty' => true,
                            'number' => 6,
                            'parent' => 0
                        ));
                        
                        if ($product_categories && !is_wp_error($product_categories)) :
                            foreach ($product_categories as $category) :
                                $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
                                $image_url = wp_get_attachment_url($thumbnail_id);
                                if (!$image_url) {
                                    $image_url = get_template_directory_uri() . '/assets/images/home1/category/category-1.jpg';
                                }
                                ?>
                                <div class="categories-wrap">
                                    <div class="categories-img">
                                        <a href="<?php echo get_term_link($category); ?>" class="category-link">
                                            <img src="<?php echo esc_url($image_url); ?>" class="img-fluid" alt="<?php echo esc_attr($category->name); ?>">
                                        </a>
                                    </div>
                                    <div class="categories-info">
                                        <a href="<?php echo get_term_link($category); ?>" class="category-title">
                                            <span><?php echo esc_html($category->name); ?></span>
                                        </a>
                                    </div>
                                </div>
                                <?php
                            endforeach;
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- categories end -->

    <!-- newsletter start -->
    <section class="newsletter">
        <div class="container">
            <div class="newsletter-area">
                <div class="newsletter-content">
                    <div class="newsletter-info">
                        <h2>Get 10% discount coupon</h2>
                        <p>Subscribe to our newsletter and get discount coupons for your first purchase, Please enter your email below.</p>
                    </div>
                    <div class="newsletter-form">
                        <form method="post" class="news-form">
                            <div class="news-wrap">
                                <input type="email" name="newsletter_email" placeholder="Enter your email" required>
                                <button type="submit" class="btn-style1">Subscribe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- newsletter end -->

</main>
<!-- main-content end -->